<template>
    <div class="app-user">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
        <!--卡片列表-->
        <el-tab-pane :label="statusOption['1']" name="1">
          <Query
            :items="queryColumns"
            :initial-params="queryParams"
            @query="handleQuery"
          />
          <Table
            :table-columns="tableColumns"
            :table-loading="tableLoading"
            :table-data="tableData"
            :total="total"
            :showIndex="true"
            @pagination="handlePagination"
          >
            <template v-slot:tools>
              <el-button-group>
                <el-button type="primary" @click="handleAdd">添加礼品卡</el-button>
              </el-button-group>
            </template>
            <template #headImg="scope">
              <img v-if="scope.row.headImg" :src="scope.row.headImg" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
            </template>
            <template #status="scope">
              <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{ scope.row.status === 1 ? '正常' : scope.row.status === 0 ? '注销' : '锁定'}}</el-tag>
            </template>
            <template #sex="scope">
              {{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '未知'}}
            </template>
            <template #opt="scope">
              <el-button type="primary" link @click="changeValue(scope.row)">制卡管理</el-button>
              <el-button type="primary" link @click="changeValue(scope.row)">编辑</el-button>
              <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </Table>
        </el-tab-pane>
        <!--卡片查询-->
        <el-tab-pane :label="statusOption['2']" name="2">
          <Query
            :items="queryColumns2"
            :initial-params="queryParams2"
            @query="handleQuery2"
          />
          <Table
            :table-columns="tableColumns2"
            :table-loading="tableLoading"
            :table-data="tableData2"
            :total="total2"
            :showIndex="true"
            @pagination="handlePagination2"
          >
            <template #headImg="scope">
              <img v-if="scope.row.headImg" :src="scope.row.headImg" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
            </template>
            <template #status="scope">
              <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{ scope.row.status === 1 ? '正常' : scope.row.status === 0 ? '注销' : '锁定'}}</el-tag>
            </template>
            <template #sex="scope">
              {{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '未知'}}
            </template>
            <template #opt="scope">
              <el-button :type="scope.row.status === 1 ? 'danger' : 'primary'" link @click="changeValue(scope.row)">{{ scope.row.status === 1 ? '锁定' : '恢复' }}</el-button>
            </template>
          </Table>
        </el-tab-pane>
        <!--购卡记录-->
        <el-tab-pane :label="statusOption['3']" name="3">
        </el-tab-pane>
      </el-tabs>
      <el-dialog v-model="showDialog" :title="dialogTitle" width="600">
        <el-form ref="refForm" :model="formData" size="default">
          <el-form-item label="活动名称" label-width="100px" required>
            <el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入活动名称" autocomplete="off" />
          </el-form-item>
          <el-form-item label="充值满足条件" label-width="100px">
            <div>大于金额<el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入活动名称" autocomplete="off" /></div>
            <div>小于金额<el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入活动名称" autocomplete="off" /></div>
          </el-form-item>
          <el-form-item label="赠送金额" label-width="100px" required>
            <el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入赠送金额" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" label-width="100px">
            <el-radio-group v-model="formData.isParent">
              <el-radio :value="1">显示</el-radio>
              <el-radio :value="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="default">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="user">
  import Table from "@/components/Table/index.vue";
  import Query from "@/components/Query/index.vue";
  import { appUserList } from "@/api/member";
  const { proxy } = getCurrentInstance()
  const tableData = ref([])
  const tableData2 = ref([])
  const total = ref(0)
  const total2 = ref(0)
  const tableLoading = ref(true)
  const loading = ref(false)
  const showDialog = ref(false)
  const activeName = ref('1')
  const statusOption = reactive({
    '1':'卡片列表',
    '2':'卡片查询',
    '3':'购卡记录',
  })
  const data = reactive({
   tableColumns: [
     { label: "礼品卡名称", prop: "nickname", },
     { label: "创建时间", prop: "headImg", slot: 'headImg' },
     { label: "卡有效期", prop: "phone" },
     { label: "制卡状态",  prop: "status", slot: 'status'},
     { label: "制卡批次", prop: "phone" },
     { label: "已激活数", prop: "phone" },
     { label: "制卡总数", prop: "phone" },

     { label: "操作",  prop: "opt", slot: 'opt',fixed:'right',width:180},
   ],
   queryColumns: [
   ],
   pageParams: {
    current: 1,
    size: 10
   },
   queryParams: {},
   formItems: [
   ],
   tableColumns2: [
     { label: "支付订单号", prop: "nickname", },
     { label: "支付方式", prop: "headImg", slot: 'headImg' },
     { label: "支付金额", prop: "phone" },
     { label: "用户昵称", prop: "phone" },
     { label: "用户手机号", prop: "phone" },
     { label: "充值时间",  prop: "status", slot: 'status'},
   ],
   queryColumns2: [
     { label: '用户昵称', prop: 'nickname', type: 'input', attrs: { placeholder: '请输入用户昵称' } },
     { label: '用户手机号', prop: 'phone', type: 'input',  attrs: { placeholder: '请输入手机号' } },
   ],
   pageParams2: {
    current: 1,
    size: 10
   },
   queryParams2: {},
   formItems2: [
   ]
  })
  const handleChange = (tab, event) => {
    queryParams.value.current = 1
    console.log(tab, event)
  }
  
  const { tableColumns, queryColumns, pageParams, queryParams,tableColumns2, queryColumns2, pageParams2, queryParams2 } = toRefs(data)
  /** 获取列表数据 */
  const getList = () => {
    tableLoading.value = true
    const data  = {
       ...queryParams.value,
       ...pageParams.value
    }
    appUserList(data)
     .then(res => {
         tableData.value = res.data.records
         total.value = res.data.total
     })
     .finally(() => {
         tableLoading.value = false
     })
  }
  getList()
  /** 获取列表数据 */
  const getList2 = () => {
    tableLoading.value = true
    const data  = {
       ...queryParams2.value,
       ...pageParams2.value
    }
    appUserList(data)
     .then(res => {
         tableData2.value = res.data.records
         total2.value = res.data.total
     })
     .finally(() => {
         tableLoading.value = false
     })
  }
  getList2()
  /** 搜索按钮操作 */
  const handleQuery = (val) => {
   queryParams.value = val
   getList()
  }
  
  const handlePagination = (val) => {
   pageParams.value = val
   getList()
  }
  /** 搜索按钮操作 */
  const handleQuery2 = (val) => {
   queryParams2.value = val
   getList2()
  }
  
  const handlePagination2 = (val) => {
   pageParams2.value = val
   getList2()
  }
  
  const formData = ref({})
  const dialogTitle = ref('')
  
  /** 打开新增弹窗 */
  const handleAdd = () => {
    dialogTitle.value = '添加分类'
    // 重置表单数据
    formData.value = {
      classifyName: '',
      level: 1,
      isParent:1,
      parentId:'',
      img:''
    }
    showDialog.value = true
  }
  const handleSubmit = async (data) => {
   loading.value = true
   try {
     // 这里调用API进行提交
     await saveUser(data)
     await new Promise(resolve => setTimeout(resolve, 1000))
     showDialog.value = false
     getList()
     proxy.$modal.msgSuccess("操作成功")
   } finally {
     loading.value = false
   }
  }
  const changeValue = (row) => {
   proxy.$modal.confirm(`是否确认${row.status === 1 ? '锁定' : '解锁'}此用户？`)
   .then(() => {
     saveUser({ id: row.id, account: row.account, status: row.status === 1 ? 2 : 1})
     .then(() => {
       proxy.$modal.msgSuccess("操作成功")
       getList()
     })
   })
  }
  
  </script>
  <style lang="scss">
  .app-user {
   padding: 8px;
  }
  </style>